<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“麦”向梦想活动</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="loop.css">
    <style>
        .main{
            height: 570px;
        }
        p{
            color: rgb(14, 133, 64);
        }
    </style>
</head>
<body>
       <!-- 头部 -->
       <div id="titlediv">
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <a href="index.html"><li class="firstli">首页</li></a>
            <li class="firstli">精彩推送
            <div class="seconddiv">
                <ul>
                    <a href="#"><li class="secondli">淘古艺术家</li></a>
                    <a href="#"><li class="secondli">毕业季</li></a>
                    <a href="#"><li class="secondli">换届大会</li></a>
                </ul>
            </div></li>
            <li class="firstli">活动介绍
            <div class="seconddiv">
                <ul id="secondul">
                    <a href="“麦”向梦想活动.html"><li class="secondli">“麦”向梦想活动</li></a>
                    <a href="回收旧衣物.html"><li class="secondli">回收旧衣物</li></a>
                    <a href="志愿者服务嘉年华.html"><li class="secondli">志愿服务嘉年华</li></a>
                    <a href="爱心回收小能手.html"><li class="secondli">爱心回收小能手</li></a>
                </ul>
            </div></li>
            <li class="firstli">关于协会
            <div class="seconddiv">
                <ul>
                    <a href="部门介绍.html"><li class="secondli">部门介绍</li></a>
                    
                </ul>
            </div></li>
        </ul>
    </div>
    <div class="main">
        <div class="kuang">
        <div class="item "><img src="img//1/回收旧衣物/bg5.jpg.jpeg"></div>
        <div class="item "><img src="img//1/回收旧衣物/bg1.jpg.jpeg"></div>
        <div class="item left"><img src="img/1/回收旧衣物/bg2.jpg.jpeg"></div>
        <div class="item middle"><img src="img//1/回收旧衣物/bg3.jpg.jpeg"></div>
        <div class="item right"><img src="img//1/回收旧衣物/bg4.jpg.jpeg"></div> 
        </div> 
        <hr>
        <div class="page">
            <p>本次“回收旧衣物”活动已经圆满结束啦！
                感谢此次活动中志愿者们辛苦付出，使得此次活动得以顺利拉下帷幕
                感谢志愿者们的共同努力营造猫咪的“新家”，让猫咪们在寒冷的冬季有一个温暖住所
                让我们共同期待下一次的“回收旧衣物”志愿活动吧，
                欢迎各位小麦苗们积极踊跃地参与呀！</p>
        </div>
    </div>
    <div class="xiaorenR">
        <img src="img/p6.gif" width="100%" height="100%">
    </div>
    <div class="xiaorenL">
        <img src="img/p1.gif" width="100%" height="100%">
    </div>
    <script>
        var items = document.querySelectorAll('.item');
        for(var i=0;i<items.length;i++)
        {    
            items[i].addEventListener('click',function(){

                 for(let j=0;j<items.length;j++)
                {
                    items[j].classList.remove('left','right','middle');
                    items[j].classList.add('xiaoshi');
                    
                } 

                this.classList.remove('left','middle','right');
                this.classList.add('middle');
              

                let left = this.previousElementSibling ?? items[items.length-1];
                left.classList.add('left'); 
 
                let right = this.nextElementSibling ?? items[0]; 
                right.classList.add('right');  
                
            })
        }
     


    </script>
</body>
</html>